<!--  -->
<template>
  <div class="editable-cell" :class="required ? 'requiredFormItem' : ''">
    <a-input-number style="width: 100%;" v-if="percentage" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" :min="min" :precision="precision" placeholder="请输入" @change="handleChange" :disabled="disabled" :step="step" :value="text" />
    <a-input-number style="width: 100%;" v-else :min="min" :precision="precision" placeholder="请输入" @change="handleChange" :disabled="disabled" :step="step" :value="text" />
  </div>
</template>

<script>
export default {
  name: 'EditableNumber',
  props: {
    text: [String, Number],
    disabled: {
      type: Boolean,
      defalut: false
    },
    maxLength: {
      type: Number,
      default: 20
    },
    step: {
      type: Number,
      default: 1
    },
    required: {
      type: Boolean,
      defalut: false
    },
    precision: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 1
    },
    percentage: {
      type: Boolean,
      defalut: false
    }
  },
  data() {
    return {}
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    handleChange(e) {
      const value = e
      this.$emit('change', value)
    }
  }
}
</script>
<style lang='less' scoped>
// /deep/ .ant-input-number {
//   border: none;
// }
</style>